<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpn :number1="num1" :number2="num2" @fnum1="num1IputCheng" @fnum2="num2IputCheng"></cpn>
		</div>
	</body>
	<template id="cpn">
		<div>
			<h2>props{{number1}}</h2>
			<h2>data{{dnumber1}}</h2>
			<!-- <input type="text" name="" id="" value="" v-model="dnumber1"/> -->
			<input type="text" name="" id="" value="" :value="dnumber1" @input="num1Input" />
			<h2>{{number2}}</h2>
			<h2>{{dnumber2}}</h2>
			<!-- <input type="text" name="" id="" value="" v-model="dnumber2"/> -->
			<input type="text" name="" id="" value="" :value="dnumber2" @input="num2Input" />
		</div>
	</template>
	<script type="text/javascript">
		const app = new Vue({
			el: '#app',
			data: {
				num1: 1,
				num2: 0
			},
			methods: {
				num1IputCheng(num){
					this.num1 = parseInt(num);
				},
				num2IputCheng(num){
					this.num2 = parseInt(num);
				}
			},
			components: {
				cpn: {
					template: '#cpn',
					props: {
						number1: Number,
						number2: Number
					},
					data() {
						return {
							dnumber1: this.number1,
							dnumber2: this.number2
						}
					},
					methods: {
						num1Input(event) {
							this.dnumber1 = event.target.value
							this.$emit('fnum1',this.dnumber1);
							this.dnumber2 = event.target.value * 1000
							this.$emit('fnum2', this.dnumber2)
						},
						num2Input(event) {
							this.dnumber2 = event.target.value
							this.$emit('fnum2',this.dnumber2)
							this.dnumber1 = event.target.value / 1000
							this.$emit('fnum1', this.dnumber1)
						}
					}
				}
			}
		})
	</script>
</html>
